<template>
  <div class="user-table">
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="6">
        <el-input v-model="searchUsername" placeholder="请输入用户名" @keyup.enter="filterData"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input style="margin-left: 10px" v-model="searchEmail" placeholder="请输入邮箱" @keyup.enter="filterData"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input style="margin-left: 20px" v-model="searchPhone" placeholder="请输入手机号" @keyup.enter="filterData"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button style="margin-left: 30px" @click="filterData" size="mini">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="paginatedData" stripe style="width: 100%;margin-top: 20px">
      <el-table-column prop="id" label="id" class="text-center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="userName" label="用户名"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="phone" label="手机号码"> </el-table-column>
      <el-table-column prop="jifen" label="账户积分"> </el-table-column>
      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="deleteUser(scope.row.id)"
            style="font-size: 12px;"
            size="mini"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        searchUsername: '',
        searchEmail: '',
        searchPhone: '',
        filteredData: [],
        currentPage: 1,
        pageSize: 10
      };
    },
    computed: {
      paginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.filteredData.slice(start, end);
      }
    },
    methods: {
      deleteUser(id) {
        // 删除用户
        this.$confirm("确定删除该用户？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.axios
              .post(
                "http://localhost:9151/admin/deleteUser?userId=" + id
              )
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功"
                });
                this.listUser();
              })
              .catch((res) => {
                this.$message({
                  type: "error",
                  message: "删除失败"
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      listUser() {
        this.axios
          .get("http://localhost:9151/admin/listUsers")
          .then((res) => {
            // console.log(res.data.data);
            this.tableData = res.data.data;
            for (var i = 0; i < this.tableData.length; i++) {
              // 性别
              if (this.tableData[i].sex == 0) {
                this.tableData[i].sex = "女";
              } else if (this.tableData[i].sex == 1) {
                this.tableData[i].sex = "男";
              }

              // 状态
              if (this.tableData[i].state == 0) {
                this.tableData[i].state = "游客";
              } else if (this.tableData[i].state == 1) {
                this.tableData[i].state = "会员";
              }
            }
            this.filterData();
          })
          .catch((res) => {
            console.log("err:" + res);
          });
      },
      filterData() {
        this.filteredData = this.tableData.filter(item => {
          const usernameMatch = item.userName.includes(this.searchUsername);
          const emailMatch = item.email.includes(this.searchEmail);
          const phoneMatch = item.phone.includes(this.searchPhone);
          return usernameMatch && emailMatch && phoneMatch;
        });
        this.currentPage = 1;
      },
      handleSizeChange(newSize) {
        this.pageSize = newSize;
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
      }
    },
    mounted() {
      this.listUser();
    }
  };
</script>

<style>
  .user-table {
    margin: 2rem;
  }

</style>
